<template>
  <div style="display: flex; justify-content: center;">
    <el-input
      v-model="key"
      class="search-bar"
    >
      <template #append>
        <el-button
          @click="handleSearch()"
          style="width: 50px;
          background-color: #3271ae;
          border-radius: 0 5px 5px 0;
          color: #fff;"
        >
          <el-icon style="color: #f5f3f2">
            <Search />
          </el-icon>
        </el-button>
      </template>
    </el-input>
  </div>
</template>

<script>
import NSearchInput from "../NSearchInput.vue";

export default {
  extends: NSearchInput,
};
</script>

<style scoped>
.search-bar {
  width: 200px;
}

.search-button {
  width: 50px;
  background-color: #3271ae;
  border-radius: 0 5px 5px 0;
}
</style>